<template>
    <div class="news">
        <mt-navbar :class="totop?'fixed':'mint-navbar'" v-model="selected">
            <mt-tab-item id="1"><p class="f14">最新动态</p>
            </mt-tab-item>
            <mt-tab-item id="2"><p class="f14">附近动态</p></mt-tab-item>
        </mt-navbar>
        <!-- tab-container -->
        <mt-tab-container class="container" v-model="selected">
            <mt-tab-container-item class="container-item" id="1">
                <div class="mt-cell" v-for="data of wear" :key="data.wear_id" :data-id="data.wear_id" @click="reflesh">
                    <router-link :to="{name: '/Detail', params:{id:data.wear_id}}">
                    <div class="head">
                        <img :src="data.image" class="avatar">
                        <div class="info">
                            <p class="title">{{data.username}}</p>
                            <p class="time">{{data.wear_time}}</p>
                        </div>
                        <span class="price">{{data.price}}</span>
                    </div>
                    <div class="imgbox">
                        <img :src="data.wear_picture" class="show">
                    </div>
                    <div class="detail">
                        <p class="desc">{{data.wear_content}}</p>
                    </div>
                    <div class="bottom">
                        <div class="addr">{{data.add}}</div>
                        <div class="kind">{{data.kind}}</div>
                        <div class="star" v-if="data.star !== '' ">{{data.star}}</div>
                        <div class="star" v-if="data.num !== '' ">{{data.num}}</div>
                    </div>
                    </router-link>
                </div>
            </mt-tab-container-item>

            <mt-tab-container-item class="container-item" id="2">
              <router-link to="/detail">
                <div class="mt-cell" v-for="data in nears">
                    <div class="head">
                        <img :src="data.avatar" class="avatar" alt="">
                        <div class="info">
                            <p class="title">{{data.name}}</p>
                            <p class="time">{{data.time}}</p>
                        </div>
                        <span class="price">{{data.price}}</span>
                    </div>
                    <div class="imgbox">
                        <img :src="data.img" class="show" alt="">
                    </div>
                    <div class="detail">
                        <p class="desc">{{data.desc}}</p>
                    </div>
                    <div class="bottom">
                        <div class="addr">{{data.add}}</div>
                        <div class="kind">{{data.kind}}</div>
                        <div class="star" v-if="data.star !== '' ">{{data.star}}</div>
                        <div class="star" v-if="data.num !== '' ">{{data.num}}</div>
                    </div>
                </div>
              </router-link>
            </mt-tab-container-item>
        </mt-tab-container>


        <div class="swiper-box">
            <swiper :options="swiperOption">
                <swiper-slide v-for="(date,index) in recoms" :key="index">
                    <router-link to="/" class="item">
                        <div class="title">{{date.title}}</div>
                        <div class="info">
                            <span class="fabu">发布数 {{date.members}}</span>
                            <span class="hot">昨日人气 +{{date.num}}</span>
                        </div>
                        <div class="desc">
                            <span class="gonggao">公告</span>
                            <span class="produ">{{date.produ}}</span>
                        </div>
                        <div class="imgbox" >
                            <img class="display"v-for="image in date.images" :src="image.img" alt="">
                        </div>
                        <div class="addr">
                            <p class="destance">距离你{{date.destance}}米</p>
                        </div>
                    </router-link>
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>
<script>
    import {mapActions} from 'vuex'
    import axios from 'axios'
    export default {
        props: ['wearing'],
        data () {
            return {
                scrollWatch: true,
                swiperOption: {
                    slidesPerView: 'auto',
                    centeredSlides: true,
                    spaceBetween: 30,
                    loop: true
                },
                selected: '1',
                scroll: 0,
                totop: false,
                wear:[],
                wear_id: '',
                avatar:require('../../../assets/images/cat.png'),
                username: '',
                time: '',
                price: '',
                wear_picture: '',
                wear_content: '',
                wear_userid: '',
                wear_title: '',
                wear_time:'',
                wear_userimage: '',
                add: '',
                kind: '',
                star: '点赞',
                freight: '0',
                isShow: true,
                txt: '显示全部',
                num: 3,

                nears: [
                    {
                        'avatar': require('../../../assets/images/cat.png'),
                        'name': '流浪在天际',
                        'time': '7小时前来过',
                        'price': '￥100',
                        'img': require( '../../../assets/images/hangpai.png'),
                        'desc': '席梦思床垫1.8米x2米 95新，换了乳胶，上门自提',
                        'add': '来自南昌',
                        'kind': '趣巢|塘山镇',
                        'star': '点赞',
                        'num': '2'
                    },
                    {
                        'avatar': require('../../../assets/images/cat.png'),
                        'name': '万莉佳',
                        'time': '8小时前来过',
                        'price': '￥80',
                        'img': require( '../../../assets/images/hangpai.png'),
                        'desc': '绑带细跟真皮凉鞋，清鞋柜，300多买来的，穿过两次，9.5新，34码，鞋跟10厘米左右，鞋子多，便宜处理',
                        'add': '来自南昌',
                        'kind': '趣巢|众鑫城上城'
                    }
                ],
                recoms: [
                    {
                        'title': '安信工趣巢',
                        'members': 393,
                        'num': 16,
                        'produ': '想要宝贝置顶的可以私聊我',
                        'destance': 291,
                        'images':
                            [
                                {'img':require( '../../../assets/images/cat.png')},
                                {'img':require( '../../../assets/images/zara.png')}
                            ]
                    },
                    {
                        'title': '华瑞锦城趣巢',
                        'members': 60,
                        'num': 3,
                        'produ': '[专治各种疑问]趣巢是什么？',
                        'destance': 319,
                        'images':
                            [
                                {'img': require('../../../assets/images/cat.png')},
                                {'img':require( '../../../assets/images/hangpai.png')}
                            ]

                    },
                    {
                        'title': '朱家新村趣巢',
                        'members': 91,
                        'num': 6,
                        'produ': '想要宝贝置顶的可以私聊我',
                        'destance': 418,
                        'images':
                            [
                                {'img': require('../../../assets/images/cat.png')},
                                {'img': require('../../../assets/images/duorou.png')}
                            ]

                    }
                ]

            }
        },
        watch: {
            selected: function(val) {
                this.selected = val;
                // console.log(this.selected);
            }
        },

        methods: {
            reflesh(){
                location.reload()
            },
            showMore(){

                this.isShow = !this.isShow;

                this.num = this.isShow? 2: this.wear.length;
                this.txt = this.isShow?  '显示全部':'收起'
            },
            menu() {
                //var Height= document.querySelector('.news').offsetTop;
                // console.log(Height)
                // console.log(this.scroll)
                this.scroll = document.body.scrollTop;
                //console.log(this.scroll)
                // if (this.scroll >= Height-65) {
                //     this.totop = true
                // }else{
                //     this.totop = false
                // }
            }
        },
        mounted() {
            axios.get('/api/wear/index.html')
                .then((res) => {
                    console.log(res);
                    this.wear = res.data.data;
                })
                .catch((err) => {
                    console.log(err);
                });
            document.documentElement.scrollTop = document.body.scrollTop = 0
            window.addEventListener('scroll', this.menu, false)
        },
        destroyed () {
            this.scrollWatch = true;
        },
        created() {
            this.id = this.$route.params.id;
        }
    }
</script>
<style lang="css" scoped>
    .swiper-slide{
        width: 5rem;
        height: 5rem;
        background-color: #f7f7f7;
        padding: 30px 18px 18px 18px;
        box-sizing: border-box;
        margin-bottom: 1rem;
    }
    .swiper-slide .title{
        color: #000;
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 10px;
    }
    .swiper-slide .info{
        color: #000;
        font-size: 10px;
        font-weight: 400;
        margin-bottom: 12px;
    }
    .swiper-slide .gonggao {
        border: 1px solid #7dc5eb;
        font-size: 15px;
        padding: 0 .4rem;
        box-sizing: border-box;
        color: #7dc5eb;
    }
    .swiper-slide .desc{
        color: #000;
        font-size: 16px;
        font-weight: 400;
    }
    .swiper-slide .imgbox{
        margin-top: 10px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        height: auto;
        overflow: hidden;
        margin-bottom: 0;
    }
    .imgbox .display{
        width: 50%;
        height: 2rem;
        margin-left: .4rem;
    }
    .swiper-slide .addr{
        border-top: 1px solid #ddd;
        padding-top: 10px;
        text-align: center;
        color: #000;
        background: no-repeat;
        background-position: 30% 100%;
        -webkit-background-size: 14px 14px;
        background-size: 14px 14px;
    }
    .swiper-slice .item{

        text-decoration: none;
    }
    .mint-swipe{
        height: 200px;
    }
    .mint-navbar .mint-tab-item.is-selected {
        border-bottom: .3rem solid #ffda44;
        color: #ffda44;
        margin-bottom: -.3rem;
    }
    .f14 {
        float: left;
        text-align: center;
        font-size: 20px;
    }
    .fixed{
        position: fixed;
        top: 45px;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 100;
    }
    .mt-cell{
        width: 100%;
        margin-bottom: 1rem;
    }
    .container {
        margin-top: 20px;
    }
    .container-item {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        box-sizing:border-box;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
    }
    .container-item .head{
        display: -webkit-flex;
        display: flex;
        align-items: center;
        margin-top: 0;
    }
    .head .avatar{
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
    }
    .head .info{
        flex:1;
        margin-left: 0;
    }
    .head .title {
        font-size: 15px;
        color: #000;
        margin-bottom: .2rem;
        margin-left: 12px;
    }
    .head .time{
        font-size: 10px;
        color: #999;
        padding-left: 10px;
        background: no-repeat;
        background-size: 14px 14px;
        background-position: 0 87%;
    }
    .head .price{
        margin-right: 10px;
        color: red;
        font-size: 15px;
        font-weight: 700;
    }
    .imgbox {
        margin-top: .4rem;
        width: 22rem;
        height: 5rem;
    }
    .imgbox .show{
        width: 50%;
        height: 100%;
        margin-top: -15px;
        margin-left: 0;
    }
    .detail{
        margin-top: 10px;
        width: 100%;
        color: #000;
        font-weight: 500;
        font-size: 13px;
        padding-bottom: 10px;
        border-bottom: 1px solid #f3f3f3;
    }
    .bottom {
        margin-top: 5px;
        color: #7dc5eb;
        display: -webkit-flex;
        display: flex;
        font-weight: 500;
        font-size: 15px;
        margin-bottom: 1px;

    }
    .bottom .kind{
        margin-left: 1rem;
        flex: 1;
    }
    .bottom .star{
        color: #888;
    }
</style>
